<template>
    <view class="cooperation">
        <uv-navbar
            title="搜索结果"
            @leftClick="leftClick"
            bg-color="linear-gradient(to right, #D2F1DE 0%, #E3F6E8 50% ,#D2F1DE 100%)"
            :fixed="true"
        ></uv-navbar>
        <view class="cooperation-search">
            <view class="cooperation-top">
                <uv-search
                    placeholder="请输入搜索内容"
                    v-model="keyword"
                    @search="search"
                    @custom="search"
                ></uv-search>
            </view>
        </view>
        <view class="cart">
            <view
                class="cart-item"
                v-for="i in articleList"
                @click="Godetail(i.id)"
                :key="i"
            >
                <view class="cart-top">
                    <view>{{ i.type_text }}</view>
                </view>
                <view class="cart-bottom">
                    <view class="cart-left">
                        <image
                            :src="BaseUrl + i.images[0]"
                            style="
                                width: 170rpx;
                                height: 170rpx;
                                border-radius: 30rpx;
                            "
                            mode="scaleToFill"
                        />
                    </view>
                    <view class="cart-right">
                        <view class="cart-right-text">
                            <!-- <uv-parse :content="i.content"></uv-parse> -->
                            <view class="line-clamp-2">
                                {{ i.title ? i.title : i.content }}
                            </view>
                        </view>
                        <view class="cart-right-bon">
                            <view
                                class="cart-right-left"
                                style="
                                    display: flex;
                                    align-items: center;
                                    width: 200rpx;
                                    height: 60rpx;
                                "
                            >
                                <image
                                    :src="BaseUrl + '/static/catering/Eyeo.png'"
                                    style="width: 26rpx; height: 26rpx"
                                    mode="scaleToFill"
                                />
                                <text class="cart-right-left-text">{{
                                    i.views
                                }}</text>
                            </view>
                            <view class="cart-right-right" @click="dian(i.id)">
                                <view
                                    v-if="0 == i.isFollow"
                                    class="cart-right-ss"
                                >
                                    <image
                                        :src="
                                            BaseUrl +
                                            '/static/catering/noollection.png'
                                        "
                                        style="width: 30rpx; height: 30rpx"
                                        mode="scaleToFill"
                                    />
                                    <view class="cart-right-s-texts">收藏</view>
                                </view>
                                <view v-else class="cart-right-s">
                                    <image
                                        :src="
                                            BaseUrl +
                                            '/static/catering/shouc.png'
                                        "
                                        style="width: 30rpx; height: 30rpx"
                                        mode="scaleToFill"
                                    />
                                    <view class="cart-right-s-text"
                                        >已收藏</view
                                    >
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <u-loadmore v-if="articleList.length > 0" :status="status" />
            <u-empty
                text="没有搜索结果"
                mode="list"
                v-if="articleList.length == 0"
            ></u-empty>
        </view>
    </view>
</template>

<script>
import { BaseUrl } from "../../../utils/req.js";
export default {
    data() {
        return {
            BaseUrl,
            keyword: "",

            list: [],

            // 攻略列表
            articleList: [],
        };
    },
    onLoad(options) {
        this.keyword = options.keyword;
        this.id = options.id;
        if (this.keyword) {
            this.search();
        } else {
            this.getlist();
        }
    },
    methods: {
        // 跳转种草详情
        Godetail(id) {
            uni.navigateTo({
                url: "/dabai/pages/zcDetails/zcDetails?id=" + id,
            });
        },
        // 收藏
        async dian(id) {
            await this.$request
                .post("api/wanlshop/find/user/setFindUser", {
                    id: id,
                    type: "follow",
                })
                .then((res) => {
                    this.search();
                });
        },
        leftClick() {
            uni.navigateBack();
        }, // 种草分类
        async getlist() {
            await this.$request
                .get("api/wanlshop/find.find/getList", {
                    wanlshop_find_cate_id: this.id,
                    search: this.keyword,
                    type: "works",
                    page: this.page,
                })
                .then((res) => {
                    if (res.data.data.length < 15) {
                        this.status = "nomore";
                    } else {
                        this.status = "loadmore";
                    }
                    this.articleList.push(...res.data.data);
                });
        },

        // 搜索
        async search() {
            this.page = 1;
            this.articleList = [];
            this.getlist();
        },
    },
};
</script>

<style lang="scss" scoped>
/deep/.uv-tabs__wrapper__nav__item {
    width: 50% !important;
}

/deep/.uv-search__content {
    background-color: #ffffff !important;
}

/deep/.uv-search__content__input {
    background-color: #ffffff !important;
}

/deep/.uv-search__action {
    background: linear-gradient(to right, #00a579, #057849);
    padding: 14rpx 30rpx;
    border-radius: 30rpx;
    margin-right: 4rpx;
    color: #fff !important;
    width: 140rpx !important;
}

// /deep/.uv-icon__icon {
// 	font-size: 0 !important;
// }

.cooperation {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
        to bottom,
        #d3f1de 0%,
        #f4f6f5 30%,
        #f6f6f6 100%
    );

    .cooperation-search {
        width: 94vw;
        margin: 0rpx 3vw;
        padding-top: 190rpx;

        .cooperation-top {
            background-color: #fff;
            border-radius: 30rpx;
        }
    }

    .tabs {
        margin: 0 20rpx;
    }

    .cart {
        width: 94vw;
        padding-top: 20rpx;
        margin: 0 3vw;

        .cart-item {
            width: 100%;
            height: 290rpx;
            background-color: #fff;
            border-radius: 30rpx;
            margin-bottom: 20rpx;

            .cart-top {
                width: 94vw;
                margin: 0 3vw;
                padding: 32rpx 34rpx 32rpx 0;
            }

            .cart-bottom {
                display: flex;

                .cart-left {
                    margin: 0 20rpx;
                }

                .cart-right {
                    flex: 1;

                    .cart-right-text {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #666666;
                        line-height: 1;
                        height: 90rpx;
                    }

                    .cart-right-bon {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: 20rpx;

                        .cart-right-left {
                            .cart-right-left-text {
                                margin-left: 10rpx;
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                font-size: 26rpx;
                                color: #666666;
                            }
                        }

                        .cart-right-right {
                            display: flex;
                            align-items: center;

                            .cart-right-s {
                                display: flex;
                                align-items: center;
                                margin-right: 20rpx;
                                border-radius: 30rpx;
                                border: 1rpx solid #057849;
                                padding: 6rpx 15rpx;

                                .cart-right-s-text {
                                    margin-left: 10rpx;
                                    font-family: Source Han Sans CN;
                                    font-weight: 400;
                                    font-size: 26rpx;
                                    color: #057748;
                                }
                            }

                            .cart-right-ss {
                                display: flex;
                                align-items: center;
                                margin-right: 20rpx;
                                border-radius: 30rpx;
                                border: 1rpx solid #666;
                                padding: 6rpx 15rpx;

                                .cart-right-s-texts {
                                    margin-left: 10rpx;
                                    font-family: Source Han Sans CN;
                                    font-weight: 400;
                                    font-size: 26rpx;
                                    color: #666666;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
.line-clamp-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
</style>
